<template>
    <page-box class="custom-page-box" :class="{ tabs3: form.tabs === '3' }">
        <template v-slot:header>
            <ask-breadcrumb>
                <template
                    v-for="(item, index) in $getBreadCrumbsName('/module-manage/town-task-handle')"
                >
                    <ask-breadcrumb-item
                        :key="index"
                        v-if="item.path"
                        :to="'/' + item.path"
                        >{{ item.meta.title }}</ask-breadcrumb-item
                    >
                    <ask-breadcrumb-item :key="index" v-else>{{ item.meta.title }}</ask-breadcrumb-item>
                </template>
                <ask-breadcrumb-item>{{ $route.query.tabs ? $route.query.tabs === '1' ? '任务审核' : $route.query.tabs === '2' ? '任务填报' : '下发的任务' : '审核任务' }}</ask-breadcrumb-item>
            </ask-breadcrumb>
        </template>
        <page-search>
<!--            <page-search-column class="tab-card">-->
<!--                <el-tabs-->
<!--                    type="card"-->
<!--                    v-model="form.tabs"-->
<!--                    @tab-click="handleTabs"-->
<!--                >-->
<!--                    <el-tab-pane name="1">-->
<!--                        <span slot="label">我审核的任务</span>-->
<!--                    </el-tab-pane>-->
<!--                    <el-tab-pane name="2">-->
<!--                        <span slot="label">待填报的任务</span>-->
<!--                    </el-tab-pane>-->
<!--                    <el-tab-pane name="3">-->
<!--                        <span slot="label">我下发的任务</span>-->
<!--                    </el-tab-pane>-->
<!--                </el-tabs>-->
<!--            </page-search-column>-->
            <template v-if="form.tabs !== '3'">
                <page-search-column v-if="form.tabs === '1'">
                    <el-tabs
                        v-model="form.status"
                        class="tab-item"
                        @tab-click="handleClick"
                    >
                        <el-tab-pane name="1">
                            <span slot="label">
                                <el-badge
                                    :value="count"
                                    class="item"
                                    :hidden="!count"
                                >
                                    <span>待审批</span>
                                </el-badge>
                            </span>
                        </el-tab-pane>
                        <el-tab-pane name="2">
                            <span slot="label">已审批</span>
                        </el-tab-pane>
                    </el-tabs>
                </page-search-column>
                <page-search-column v-else>
                    <el-tabs
                        class="tab-item"
                        v-model="form.status"
                        @tab-click="handleClick"
                    >
                        <el-tab-pane name="1">
                            <span slot="label">进行中</span>
                        </el-tab-pane>
                        <el-tab-pane name="2">
                            <span slot="label">已完成</span>
                        </el-tab-pane>
                    </el-tabs>
                </page-search-column>
                <page-search-column
                    class="fixed-column"
                    v-if="form.tabs === '1'"
                >
                    <page-search-item>
                        <el-input
                            class="pbb__search-input"
                            v-model="form.formName"
                            placeholder="请输入表单名称"
                        ></el-input>
                    </page-search-item>
                    <page-search-item>
                        <el-button
                            type="primary"
                            class="pbb__search-btn"
                            @click="getTable(1)"
                            >搜索</el-button
                        >
                    </page-search-item>
                </page-search-column>
            </template>
        </page-search>
        <template v-if="form.tabs === '1'">
            <Tab01
                :tableData="tableData"
                :tableColumn="tableColumn"
                :form="form"
            />
        </template>
        <template v-if="form.tabs === '2'">
            <Tab02
                ref="tab02"
                :pageSize="pageSize"
                :pageIndex="pageIndex"
                :status="form.status"
            />
        </template>
        <ask-empty-text
            style="min-height: 400px"
            v-if="tableData.length === 0 && form.tabs !== '3'"
        >
        </ask-empty-text>
        <template v-slot:footer v-if="total > 0 && form.tabs !== '3'">
            <pagination
                :total="total"
                :page.sync="pageIndex"
                :limit.sync="pageSize"
                @pagination="getTable"
            />
        </template>
        <template v-if="form.tabs === '3'">
            <created-all></created-all>
        </template>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue, Provide } from "vue-property-decorator";
import Tab01 from "./components/received-tab1.vue";
import Tab02 from "./components/received-tab2.vue";
import CreatedAll from "./created-all.vue";

Component.registerHooks(["beforeRouteEnter"]);
@Component({
    name: "ReceivedListNotAlive",
    components: {
        Tab01,
        Tab02,
        CreatedAll
    }
})
export default class ReceivedList extends Vue {
    @Provide() ReceivedList = this;
    total = 0;
    pageIndex = 1;
    pageSize = 10;
    tableData = [];
    form = {
        formName: "",
        tabs: this.$route.query.tabs || "1",
        status: "1"
    };

    count = 0;

    tableColumn: any[] = [];

    // 待审批表头
    processingColumn = [
        { label: "表单名称", prop: "name", width: 130 },
        { label: "开始填报时间", prop: "createTime", width: 150 },
        { label: "发起人", prop: "assignee", width: 120 },
        { label: "上一经办人", prop: "parentAssignee", width: 120 },
        { label: "上一经办人部门", prop: "parentDepartmentName", width: 130 },
        { label: "接收时间", prop: "nodeCreateDate", width: 150 },
        { label: "期望填报数", prop: "goal", width: 130 },
        { label: "实际填报数", prop: "dataAllCount", width: 130 }
    ];

    // 已审批表头
    finishColumn = [
        { label: "表单名称", prop: "name", width: 130 },
        { label: "开始填报时间", prop: "createTime", width: 150 },
        { label: "结束填报时间", prop: "endDate", width: 150 },
        { label: "发起人", prop: "creator", width: 120 },
        { label: "当前经办人", prop: "assignee", width: 100 },
        { label: "经办时间", prop: "handleTime", width: 150 },
        { label: "当前经办人区域", prop: "governmentName", width: 130 },
        { label: "期望填报数", prop: "goal", width: 130 },
        { label: "实际填报数", prop: "dataAllCount", width: 130 },
        { label: "完成状态", prop: "approvalStatus", width: 120 }
    ];

    mounted() {
        if (this.form.tabs === '1') {
            this.form.tabs = this.$route.params.tabs || "1";
        }
        this.tableColumn = this.processingColumn;
        this.getTable();
        this.getAllNumber();
    }

    // 获取数据统计
    async getAllNumber() {
        const res = await this.$server["task/getTable"]({
            data: {
                status: 1,
                taskKind: 2,
                pageSize: 1,
                category: "approval",
                currentPage: 1
            }
        });
        if (res.data.code === 200) {
            this.count = Number(res.data.data.total);
        } else {
            this.tableData = [];
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    // 获取表格数据
    getTable(page?: any) {
        this.pageIndex = page === 1 ? page : this.pageIndex;
        const sendOut = async() => {
            const res = await this.$server["task/getTable"]({
                data: {
                    status: Number(this.form.status),
                    formName: this.form.formName,
                    category: "approval",
                    taskKind: 2,
                    pageSize: this.pageSize,
                    currentPage: this.pageIndex
                }
            });
            if (res.data.code === 200) {
                this.tableData = res.data.data.records;
                this.total = res.data.data.total;
            } else {
                this.tableData = [];
                this.$message.error(res.data.message || "接口请求错误!");
            }
        };

        if (this.form.tabs === "1") {
            sendOut();
        } else if (this.form.tabs === "2") {
            this.$nextTick(async() => {
                const total = await (this.$refs.tab02 as any).getTable();
                if (total) {
                    this.total = total;
                }
            });
        }
    }

    handleClick() {
        this.pageIndex = 1;
        this.pageSize = 10;
        this.form.formName = "";
        this.tableColumn =
            this.form.status === "1"
                ? this.processingColumn
                : this.finishColumn;
        this.getTable();
    }

    handleTabs() {
        if (this.form.tabs === "3") {
            this.form.formName = "";
            this.form.status = "1";
        } else {
            this.pageIndex = 1;
            this.pageSize = 10;
            this.getTable();
        }
    }

    beforeRouteEnter(to: any, from: any, next: any) {
        if (["TownTableDetail", "TownDeclareFillIn"].includes(from.name)) {
            next((vm: any) => {
                vm.form = {
                    formName: "",
                    tabs: "2",
                    status: "1"
                };
            });
        } else if (
            ["TownCreatedList", "TownCreatedAndReceivedDetailAllList"].includes(
                from.name
            )
        ) {
            next((vm: any) => {
                vm.form = {
                    formName: "",
                    tabs: "3",
                    status: "1"
                };
            });
        } else if (
            ["TownCreatedAndReceivedDetailList"].includes(from.name) &&
            from.query.status === 2
        ) {
            next((vm: any) => {
                vm.form = {
                    formName: "",
                    tabs: "1",
                    status: "2"
                };
            });
        } else {
            next();
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep {
    .page-base-body {
        height: calc(100% - 102px);
        overflow: hidden !important;
    }
    .pbb__search-box {
        background: transparent !important;
    }
    .el-badge__content.is-fixed {
        top: 10px;
        right: 4px;
    }
    .el-badge__content {
        background-color: #de2728;
    }
    .el-tabs--card > .el-tabs__header {
        border: none;
    }

    .el-tabs--card > .el-tabs__header .el-tabs__nav {
        border: none;
        & > div:nth-child(1) {
            border-radius: 4px 0 0 4px;
            border-right: none;
            border-left: 1px solid #999999;
            border-bottom: 1px solid #999999;
            border-top: 1px solid #999999;
            position: relative;
            &.is-active {
                &::after {
                    content: "";
                    display: block;
                    width: 1px;
                    height: 100%;
                    background-color: #de2728;
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }
        }
        & > div:nth-child(2) {
            border: 1px solid #999999;
        }
        & > div:nth-child(3) {
            border-radius: 0 4px 4px 0;
            border-left: none;
            border-right: 1px solid #999999;
            border-bottom: 1px solid #999999;
            border-top: 1px solid #999999;
            position: relative;
            &.is-active {
                &::after {
                    content: "";
                    display: block;
                    width: 1px;
                    height: 100%;
                    background-color: #de2728;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }
        }
        & > div.is-active {
            border-color: #de2728;
        }
    }

    .task-manage-container {
        background-color: #fff;
        padding-top: 10px;
    }

    .pagination-container {
        background: #fff;
        margin-top: 10px;
    }
}

.custom-page-box.tabs3 {
    .pbb__search-box {
        background: transparent !important;
    }
    ::v-deep {
        .page-base-body {
            height: calc(100% - 40px) !important;
        }
        .page-base-box .pbb__search-column.tab-column .el-tabs__header {
            padding-left: 20px;
        }
        .page-base-footer {
            margin-top: 0;
        }
    }
}

.pbb__search-column.fixed-column {
    padding: 10px 20px !important;
    height: auto !important;
}
.tab-card {
    background-color: transparent;
    ::v-deep {
        .theme-gray.el-tabs .el-tabs__header {
            background-color: transparent;
            margin-bottom: 0;
        }
        .el-tabs__nav {
            background-color: #fff;
        }
        .el-tabs__item {
            padding: 0 22px;
            height: 36px;
            line-height: 36px;
        }
    }
}

.tab-item {
    background-color: #fff;
    padding-left: 20px;
    &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background-color: #f3f3f3;
        z-index: 1;
    }
    ::v-deep {
        .el-tabs__header {
            margin: 0;
        }
        .el-tabs__nav-wrap::after {
            display: none;
        }
        .el-tabs__active-bar {
            height: 1px;
        }
    }
}
</style>
